<template>
	<div class="contact">
		<div class="contact-left">
			<div class="left-box" v-if="articleData['contact_type'] && articleData['contact']" @click="tipCopyContact">
				<text>{{articleData['contact_type'] === 'qq' ? "QQ" : "微信"}}：{{articleData['contact']}}</text>
				<text class="primary">复制</text>
				<i class="iconfont icon-fuzhi"></i>
			</div>
		</div>
		<div class="readsum">
			<text>围观数</text>
			<text>{{articleData['pv']}}</text>
		</div>
	</div>
</template>

<script setup>
	import { computed } from 'vue';
	import tools from '@/utils/tools/index.js'
	import articles from '@/api/articles/index.js'
	import { useUserStore } from '@/store/user.js'
	import { useGeneralStore } from '@/store/general.js'

	const userStore = useUserStore();
	const generalStore = useGeneralStore();

	const props = defineProps({
		articleData: {
			type: Object,
			default: () => ({})
		}
	})

	const consumeGold = computed(() => Number(generalStore.systemData.gold.contact || 0));

	async function tipCopyContact() {
		console.log(consumeGold.value);
		if (!userStore.token) return userStore.init();
		if (!consumeGold.value) return copyContact();
		if (userStore.checkGold(consumeGold.value)) return;
		uni.showModal({
			title: '提示',
			content: `亲，获取联系方式会消耗 ${consumeGold.value} 个金币哦。`,
			cancelColor: '#909193',
			confirmColor: '#3c9cff',
			success: (res) => {
				if (res.confirm) {
					copyContact();
				}
			}
		})
	}

	async function copyContact() {
		tools.loading();
		const response = await articles.getContact({ id: props['articleData']['_id'] })
		uni.hideLoading()
		if (response['code'] === 200) {
			uni.setClipboardData({
				data: response['data'],
				success: () => {
					tools.toast({ title: '复制成功', icon: 'success' })
				}
			});
		}
	}
</script>

<style lang="scss" scoped>
	.contact {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;

		.contact-left {
			.left-box {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 50rpx;
				background: #fff2f1;
				border-radius: 13px;
				padding: 0 16rpx;
				font-size: 28rpx;
				box-sizing: border-box;

				text {
					color: $uv-content-color;
				}

				.primary {
					margin-left: 20rpx;
					color: $uv-error;
					font-weight: 500;
				}

				.iconfont {
					color: $uv-error;
					padding-left: 2rpx;
				}
			}
		}

		.readsum {
			color: $uv-tips-color;
			font-size: 28rpx;

			text:last-child {
				color: $uv-content-color;
				padding-left: 4rpx;
			}
		}
	}
</style>